<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<div style="padding-bottom: 4px">
	<h4><span class="label label-primary" style="padding: 8px"><spring:message code="label.zdefiniowaneSlowaKluczowe" /></span></h4>
</div>
<div class="panel-group" role="tablist">
	<c:if test="${errorMsg}">
		<div class="alert alert-danger alert-dismissible fade in" role="alert" id="errorBox">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">×</span>
			</button>
			<p>
				<spring:message code="label.slowoKluczowe" /> <strong>${errorMsgText}</strong> <spring:message code="label.juzIstnieje" />
			</p>
		</div>
	</c:if>
	<div class="panel">
		<c:forEach items="${slowakluczowe}" var="sk">
		<div class="panel panel-default">
			<div class="panel-heading" role="tab" id="collapseListGroupHeading${sk.id}">

				<div class="row">
					<div class="col-md-9">
						<h3 class="panel-title">${sk.nazwa}</h3>
					</div>
					<div class="col-md-3" align="right">
							<h3 class="panel-title">
								<a href="javascript:;"> <span class="glyphicon glyphicon-remove removeSlowoKluczowe" data-skid="${sk.id}"></span>
								</a> 
								<a href="" id="editSK${sk.id}" data-toggle="modal" data-target="#popupEditSK${sk.id}"
									aria-hidden="true"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a> 
								
								<a class="" data-toggle="collapse"
									href="#collapseListGroup${sk.id}" aria-expanded="true" aria-controls="collapseListGroup${sk.id}"> <spring:message code="label.synonimy" /> <span
									class="glyphicon glyphicon-collapse-down" aria-hidden="true"></span> </a>
							</h3>
					</div>
				</div>
			</div>
			<div style="" aria-expanded="true" id="collapseListGroup${sk.id}" class="panel-collapse collapse" role="tabpanel"
				aria-labelledby="collapseListGroupHeading${sk.id}">

				<ul class="list-group" id="synonimy-list-${sk.id}">
					<c:forEach items="${sk.synonimy}" var="synonim">
						<li class="list-group-item"><div class="row">
								<div class="col-md-10">${synonim.synonim}</div>
								<div class="col-md-2" align="right">
										<h5 class="panel-title">
											<a href="javascript:;" onclick="removeSynonimZSlowoKluczowe(${synonim.id});" > <span
												class="glyphicon glyphicon-remove removeSynonim"></span>
											</a>
										</h5>
								</div>
							</div></li>

					</c:forEach>
					
					
				</ul>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="<spring:message code="label.nowySynonim" />" id="synonim${sk.id}">
								<span class="input-group-btn"> <input type="reset" onclick="dodajSynonim(${sk.id})" id="save" value="<spring:message code="label.dodaj" />" class="btn btn-primary" />
								</span>
							</div>
							<!-- /input-group -->
			</div>

			<div class="modal fade" id="popupEditSK${sk.id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">
								<span aria-hidden="true">&times;</span><span class="sr-only"><spring:message code="label.anuluj" /></span>
							</button>
							<form action="./edytujsk.html" method="POST">
								<h4><spring:message code="label.slowoKluczowe" /></h4>
								<input type="hidden" name="skId" value="${sk.id}" /> 
								<input type="text" class="form-control" name="nowaNazwa" value="${sk.nazwa}" /> <br />
								<div class="input-group"></div>
								<span class="input-group-btn"> <input type="submit" id="save" value="Zapisz" class="btn btn-primary pull-right" />
								</span>
							</form>
						</div>
					</div>
				</div>
			</div>
</div>
		</c:forEach>
	</div>

	<br /> <a id="addSK" class="btn btn-primary pull-right" style="font-weight: bold;" data-toggle="modal" data-target="#popupAddSK" aria-hidden="true"><spring:message code="label.dodajSlowoKluczowe" /></a>



	<div class="modal fade" id="popupAddSK" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only"><spring:message code="label.anuluj" /></span>
					</button>
					<form action="./dodajsk.html" method="POST">
						<h4><spring:message code="label.slowoKluczowe" /></h4>
						<input type="text" class="form-control" placeholder="<spring:message code="label.noweSlowoKluczowe" />" name="nazwa" required /> <br />
						<h4><spring:message code="label.synonimy" /></h4>
						<ul class="list-group" id="synonimList">
						</ul>
						<div class="input-group">
							<input id="nowySynonimTF" type="text" class="form-control" placeholder="<spring:message code="label.nowySynonim" />" name="synonim"> <span class="input-group-btn">
								<a id="addSynonim" class="btn btn-primary pull-left"><spring:message code="label.dodaj" /></a>
							</span>
						</div>
						<br /> <span class="input-group-btn"> <input type="submit" id="save" value="<spring:message code="label.zapisz" />" class="btn btn-primary pull-right" />
						</span>
					</form>
				</div>
			</div>
		</div>
	</div>


	<script type="text/javascript">
	
	$(".removeSynonim").click(function(event) {
		event.preventDefault()
		$(this).parent().parent().parent().parent().parent().hide();
	});
	
	function removeSynonimZSlowoKluczowe(s) {
		console.log(s);
		var requestData = {synonimId: s};
		$.post("/projekt-ankieta/szablony/usunsynonim.html", requestData, function(data) {
				console.log(data);
		});
	}
	
	$(".removeSlowoKluczowe").click(function(event) {
		event.preventDefault()
		var link = $(this);
		var requestData = {skId: $(this).attr('data-skid')};
		$.post("/projekt-ankieta/szablony/usunsk.html", requestData, function(data) {
				console.log(data);
				if(data == "") {
					console.log(link);
					link.parent().parent().parent().parent().parent().parent().hide();
				} else {
					alert(data);
				}
				
				
		});
		
		
	});
	
	function dodajSynonim(sk) {
		var nowySynonim = $('#synonim' + sk).val();
		console.log(sk + " " + nowySynonim);
		
		if(nowySynonim == '') {
			return;
		}
		
		
		var requestData = {skId: sk, synonim: nowySynonim};
		$.getJSON("/projekt-ankieta/szablony/dodajsynonim.html", requestData, function(data) {
				console.log(data);
				
				var html ="<li class='list-group-item'><div class='row'>" +
				"<div class='col-md-10'>"+ data.synonim +"</div>" +
				"<div class='col-md-2' align='right'><h5 class='panel-title'>" +
				"<a href='javascript:;' onclick='removeSynonimZSlowoKluczowe(" + data.id + ");' > " + 
				"<span class='glyphicon glyphicon-remove removeSynonim'></span></a></h5></div></div></li>"
				
				$('#synonimy-list-' + sk).append(html);
				
				$(".removeSynonim").click(function(event) {
					event.preventDefault()
					$(this).parent().parent().parent().parent().parent().hide();
				});
				
		});
		
		$('#synonim' + sk).val("");
	}
	
	
		$(document)
				.ready(
						function() {
							var i = 1;

							$("#addSynonim")
									.click(
											function() {
												
												if($('#nowySynonimTF').val() == '') return;
												
												var addNewSynonim = $(
														"<li></li>", {
															id : "synonim" + i,
														});
												addNewSynonim
														.addClass("list-group-item synonim-li");
												addNewSynonim
														.html("<div class='row'><div class='col-md-10'>"
																+ "<input type='hidden' name='synonimy' value='"
																+ $('#nowySynonimTF').val()
																+ "'/>"
																+ $(
																		'#nowySynonimTF')
																		.val()
																+ "</div>"
																+ "<div class='col-md-2' align='right'><a href='#' id='rSynonim" + i + "'> <span class='glyphicon glyphicon-remove'></span></a></div></div>");

												$('#synonimList').append(
														addNewSynonim);
												$('#nowySynonimTF').val("");

												$('#rSynonim' + i).click(
														function() {
															$(this).closest(
																	"li")
																	.remove();
														});

												i++;
											});

						});
	</script>

</div>


